

import React, { useEffect, useState } from 'react'
import { ajax } from '../../api'
import { ColumnsType } from 'antd/lib/table';
import { Button, Table, Space, Popconfirm } from 'antd';
import { rolelist } from '../../utils/common';
import { Modal } from 'antd';
import { Form } from 'antd';
import { Input } from 'antd';
import { Select } from 'antd';
import { inject, observer } from 'mobx-react';
import { reg } from '../../utils/validate';

function UserList({ user }: any) {
    const { userInfo, changeUserInfo, userList, ChangeUserList } = user
    const { Option } = Select;
    const [form] = Form.useForm()
    const [show, setShow] = useState(false)

    const getlist = async () => {
        let { code, result }: any = await ajax.getuserlist()
        if (code == 200) {
            ChangeUserList(result)
        }
    }
    const onShow = (valeu: any) => {
        form.setFieldsValue(valeu)
        setShow(true)
    }
    const handleOk = async () => {
        var value = form.getFieldsValue(true)
        let { code, result }: any = await ajax.updateinfo(value)
        if (code == 200) {
            setShow(false)
            var list = userList.map((v:any)=>{
                if(v._id == value._id){
                    v = {...v,...value}
                }
                return v
            })
            ChangeUserList(list)
        }
    }
    const handleCancel = () => {
        setShow(false)
    }
    const confirm = async (value: any) => {
        console.log(value)
        let { code, result }: any = await ajax.deluser(value)
        if (code == 200) {
            var list = userList.filter((v: any) => v._id != value._id)
            ChangeUserList(list)
        }
    }
    const columns: ColumnsType<any> = [
        {
            title: '#',
            width: 60,
            align: 'center',
            key: '#',
            render: (text: any, record: any, index: number) => <span>{index + 1}</span>
        },
        {
            title: '姓名',
            dataIndex: 'username',
            key: 'username',
            align: 'center',
        },
        {
            title: '职位',
            dataIndex: 'role',
            key: 'role',
            align: 'center',
            render: (text: any, record: any, index: number) => rolelist[record.role - 1]?.text
        },
        {
            title: '',
            dataIndex: 'action',
            key: 'action',
            align: 'center',
            render: (text: any, record: any, index: number) => (<Space>
                <Button onClick={() => onShow(record)} size='small'>修改</Button>
                <Popconfirm
                    onConfirm={() => confirm(record)}
                    okText="确定"
                    cancelText="取消"
                    title="确定删除吗？">
                    <Button size='small' danger>删除</Button>
                </Popconfirm>

            </Space>)
        }
    ]
    useEffect(() => {
        getlist()
    },[])
    return (
        <div>
            <Table style={{ width: '500px' }} rowKey={record => record._id} dataSource={userList.length > 0 ? userList : []} columns={columns} pagination={{ defaultPageSize: 6 }} />
            <Modal title="修改信息" visible={show} onOk={handleOk} onCancel={handleCancel} cancelText="取消" okText="确定">
                <Form
                    style={{ background: '#fff', padding: '30px 100px', borderRadius: '10px' }}
                    form={form}
                    name="form"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    autoComplete="off"
                >
                    <Form.Item
                        label="姓名"
                        name="username"
                        rules={[{ required: true, message: '请输入姓名' }]}
                    >
                        <Input placeholder='请输入姓名' />
                    </Form.Item>

                    <Form.Item
                        label="电话号码"
                        name="phone"
                        rules={[{ required: true, message: '请输入电话号码' },
                        { pattern: reg.phone, message: '请输入有效电话号码' }]}
                    >
                        <Input placeholder='请输入电话号码' />
                    </Form.Item>

                    <Form.Item
                        label="职位"
                        name="role"
                        rules={[{ required: true, message: '请选择职位' }]}
                    >
                        <Select placeholder='请选择职位'>
                            {
                                rolelist.map((v, i) => {
                                    if (userInfo?.role >= v.role) {
                                        return (
                                            <Option key={i} value={v.value}>{v.text}</Option>
                                        )
                                    } else {
                                        return null
                                    }
                                })
                            }
                        </Select>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}

export default inject("user")(observer(UserList))